.sub-page{
  #site-header{
    position: static;
  }
}

#site-header{
  position: fixed;
  width: 100%;
  z-index: 900;
  margin:0px;
  .menu-arrow{
    cursor: pointer;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
  }
  .band{
    margin-left:11px;
    margin-top: 5px;
  }
  .right-menu{
    float:right;
    transition:all .3s;
    position: relative;
    padding-top: 18px;
    .fa-times{
      display: none;
    }
    &.active{
      .fa-bars{
        display: none;
      }
      .fa-times{
        display: inline-block;
      }
    }

    a{
      font-size:28px;
      color:#333;
      margin:0 15px;
      &.menu-icon{
        display: none;
        margin-right: 21px;
      }
    }

    .menu-tmall{
      img{
        margin-top:-7px;
      }
    }
  }


}

#heaer-nav-close-img{
  display: none;
  position: fixed;
  right: 400px;
  top: 30px;
  z-index: 999;
  @extend %link;
  &.active{
    display: inline-block;
  }
}


@include max480() {
  #site-header{

    .band,.menu-tmall,.menu-arrow{
      display: none;
    }
    .menu-icon{
      display: inline-block!important;
    }

    .right-menu{
      &.active{
        z-index: 900;
        margin-right:0px;
      }
    }

    
  }

  .header-nav.active{
    top:0px;
    left: 0px;
    right: 0px;
    bottom:0px;
    width: 100%;

    .nav-item{
      a{
        line-height:1.5em;
      }
    }
  }
  #heaer-nav-close-img{
    &.active{
      display: inline-block;
      position: fixed;
      right: 10px;
      top: 10px;
      z-index: 10000;
    }
  }
}

@include max767 {
  #site-header {
    position: static;
  }
}

.header-nav{
  position: fixed;
  right: -380px;
  width:380px;
  height: 100%;
  background:#00d7ff;
  transition:all .3s;
  padding-left:80px;
  padding-top:50px;
  transition:all .3s;
  z-index: 900;
  &.active{
    right:0px;
    top:0px;
  }

  .nav-item{
    .zh{
      display: none;
    }
    a{
      font-size:24px;
      color:#323237;
      text-decoration: none;
      line-height:1.8em;
      font-family: "HelveticaNeueLTPro-ThEx33";
    }
    &:hover{
      a{
        color:#fff;
      }
      .en{
        display: none;
      }
      .zh{
        display: block;
      }
    }
  }
  .share{
    padding:30px 0;
    .social-link{
      margin-right:20px;
      img{
        transition:all .3s;
      }
      &:hover{
        img{

          transform:scale(1.2);
        }
        
      }
    }
  }
  .customize{
    a{
      display: inline-block;
      background-color: yellow;
      padding: 10px 20px;
      border-radius: 20px;
      font-size: 18px;
      color: #333;
      text-decoration: none;
      transition:all .3s;
      &:hover{
        transform:scale(1.1);
        box-shadow: 2px 2px 5px rgba(0,0,0,0.2); 
      }
    }
  }
}